<template>
  <view class="template-communique tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <view :style="{ height: vuex_custom_bar_height + 'px' }" class="tn-navbg">
      <tn-nav-bar customBack fixed>
        <view slot="back" class="tn-custom-nav-bar__back" @click="goBack">
          <text class="icon tn-icon-left"></text>
          <text class="icon tn-icon-home-capsule-fill"></text>
        </view>
        <view class="tn-flex tn-flex-col-center tn-flex-row-center">
          <text class="tn-text-bold tn-text-xl tn-color-black">
            匿名举报
          </text>
        </view>
      </tn-nav-bar>
    </view>

    <!-- 页面实际内容 -->
    <view class="page" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
      <tn-form
        ref="form"
        :model="form"
        :borderBottom="false"
        :errorType="['toast']"
        labelPosition="top"
      >
        <tn-form-item prop="reportType" label="举报类型" :borderBottom="false">
          <view class="report-type-list">
            <radio-group @change="onReportTypeChange">
              <view 
                v-for="(item, index) in reportTypeList" 
                :key="index" 
                class="report-type-item"
              >
                <label>
                  <radio 
                    :value="item.value" 
                    :checked="form.reportType === item.value"
                    color="#4B7BF5" 
                  />
                  <text class="radio-label">{{ item.label }}</text>
                </label>
              </view>
            </radio-group>
          </view>
        </tn-form-item>

        <tn-form-item
          prop="reportDescription"
          label="举报描述"
          :borderBottom="false"
        >
          <tn-input
            v-model="form.reportDescription"
            type="textarea"
            placeholder="请详细描述举报原因，以便我们更好地处理..."
            borderColor="#e5e7eb"
            :border="true"
            :height="256"
            :autoHeight="true"
          />
        </tn-form-item>

        <tn-form-item
          prop="evidenceList"
          label="上传证据（选填）"
          :borderBottom="false"
        >
          <uni-file-picker
            ref="evidenceList"
            fileMediatype="image"
            v-model="form.evidenceList"
            :auto-upload="false"
            @select="onSelectFile"
            @delete="onDeleteFile"
          >
            <view class="evidence-upload">
              <view class="evidence-upload-icon">
                <text class="icon tn-icon-upload"></text>
              </view>
              <text class="title">点击图片上传</text>
              <text class="tips">
                支持 jpeg、jpg、png 等格式
              </text>
            </view>
          </uni-file-picker>
        </tn-form-item>

        <view class="tips-section">
          <text class="tips-title">温馨提示：</text>
          <text class="tips-item">1. 请确保您提供的信息真实有效，恶意举报将受到处罚</text>
          <text class="tips-item">2. 我们将在3个工作日内处理您的举报</text>
          <text class="tips-item">3. 举报结果将通过站内通知您</text>
        </view>

        <tn-button
          size="lg"
          width="100%"
          margin="22rpx 0 0 0"
          backgroundColor="#4B7BF5"
          fontColor="#FFFFFF"
          :fontSize="32"
          @click="onSubmit"
        >
          提交举报
        </tn-button>
      </tn-form>
    </view>
  </view>
</template>

<script>
import template_page_mixin from "@/libs/mixin/template_page_mixin";
import { uploadToOSS } from "@/api/oss";
import { submitAnonymousReport } from "@/api/report";
import { to } from "@/util/request";

export default {
  name: "AnonymousReport",
  mixins: [template_page_mixin],
  data() {
    return {
      form: {
        reportType: "",
        reportDescription: "",
        evidence: "",
        // 回显字段
        evidenceList: []
      },

      // 举报类型列表
      reportTypeList: [
        { value: "ILLEGAL_CONTENT", label: "违规内容" },
        { value: "PRIVATE_TRANSACTION", label: "引导用户私下交易" },
        { value: "VERBAL_ABUSE", label: "言语侮辱、侮辱等行为" },
        { value: "BAD_INFORMATION", label: "不良信息" },
        { value: "OTHER", label: "其他问题" }
      ],

      // 附件 File 对象数组，用于上传到 OSS
      evidenceFileList: []
    };
  },
  methods: {
    // 选择附件，将file对象推入列表
    onSelectFile(e) {
      this.evidenceFileList.push(e.tempFiles[0]);
    },
    // 删除附件
    onDeleteFile(e) {
      // 如果是删除已上传的文件，则还需从evidence中移除对应id
      if (e.tempFile.id) {
        this.form.evidence = this.form.evidence.replace(e.tempFile.id, "");
      }
      this.evidenceFileList.splice(e.index, 1);
    },
    // 举报类型变化
    onReportTypeChange(e) {
      this.form.reportType = e.detail.value;
    },
    // 提交时上传附件到 OSS
    uploadFile(file) {
      return new Promise(async (resolve, reject) => {
        uni.showLoading({
          title: "正在上传证据",
          mask: true,
        });
        const [err, res] = await to(uploadToOSS(file.path, file.name));
        if (err) {
          reject(err.message);
          return;
        }
        resolve(res.data);
      });
    },
    // 提交举报表单
    async onSubmit() {
      // 如果有证据，则上传到 OSS，再将结果作为传参
      const promises = this.evidenceFileList.map(this.uploadFile);
      const [err, res] = await to(Promise.all(promises));
      if (err) {
        uni.showToast({
          icon: "error",
          title: "证据上传失败",
        });
        return;
      }
      this.form.evidence = [
        ...this.form.evidence.split(","),
        ...res.map((file) => file.id),
      ]
        .filter(Boolean)
        .join(",");

      // 校验字段，随后发送请求
      this.$refs.form.validate(async (isValid) => {
        if (!isValid) return;
        
        // 过滤掉回显字段
        const { evidenceList, ...body } = this.form;
        const [err, res] = await to(submitAnonymousReport(body));
        if (err) {
          uni.showToast({
            icon: "error",
            title: "举报提交失败",
          });
          return;
        }
        uni.showToast({ title: "举报提交成功" });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      });
    }
  },
  async onLoad(option) {
    // 无需加载任何初始数据
  },
  onReady() {
    this.$refs.form.setRules({
      reportType: [
        {
          required: true,
          message: "请选择举报类型",
        },
      ],
      reportDescription: [
        {
          required: true,
          message: "请输入举报描述",
        },
      ]
    });
  },
};
</script>

<style lang="scss" scoped>
.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.7;
    background-color: #ffffff;
  }
}

.tn-navbg {
  background-color: #FFFFFF;
  background-size: 500% 500%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.page {
  margin: 0 64rpx 30rpx 64rpx;
  padding-top: 20rpx;
}

.hidden {
  display: none;
}

.report-type-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.report-type-item {
  font-size: 30rpx;
  
  label {
    display: flex;
    align-items: center;
  }
}

.radio-label {
  margin-left: 10rpx;
  font-size: 30rpx;
  color: #333;
}

.evidence-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  width: 100%;
  padding: 34rpx;
  border: 2rpx dashed #d1d5db;
  border-radius: 24rpx;

  .evidence-upload-icon {
    font-size: 64rpx;
    color: #9ca3af;
  }
  
  .title {
    font-size: 28rpx;
    line-height: 40rpx;
    color: #6b7280;
  }
  
  .tips {
    font-size: 24rpx;
    line-height: 32rpx;
    text-align: center;
    color: #9ca3af;
  }
}

.tips-section {
  display: flex;
  flex-direction: column;
  margin-top: 30rpx;
  gap: 10rpx;
  
  .tips-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #4b5563;
  }
  
  .tips-item {
    font-size: 26rpx;
    line-height: 36rpx;
    color: #9ca3af;
  }
}
/deep/ .uni-file-picker__container .file-picker__box {
  width: 100% !important;
}
/deep/.evidence-upload.data-v-6e4dca14 {
    padding: 0rpx !important;
    border: none !important;
}
</style>